
<p>
  <audio #audioOption src="/assets/audio/information.mp3" controls="controls">
    Your browser does not support the audio element.
  </audio>
</p>
<div id="tool-bar" fxLayout="row " fxLayoutGap="10px">
  <app-nav-back></app-nav-back><app-nav-dashboard></app-nav-dashboard>
</div>
<div id="filter-bar" fxLayout="row " fxLayoutGap="10px">
<p><button mat-raised-button (click)="onClearClicked($event.target)">清除</button></p>
  <mat-form-field>
    <mat-select #filterStatus placeholder="订单状态" [(ngModel)]="selectedValueStatusFilter" (selectionChange)="applyStatusFilter($event.value)">
      <mat-option value="">全部</mat-option>
      <mat-option #filterStatusDefault value="已完成">已完成</mat-option>
      <mat-option value="未付款">未付款</mat-option>
      <mat-option value="待派单">待派单</mat-option>
      <mat-option value="已取消">已取消</mat-option>
      <mat-option value="进行中">进行中</mat-option>
      <mat-option value="退款中">退款中</mat-option>
      <mat-option value="问题订单">问题订单</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field>
    <input #filterUserMobile matInput [(ngModel)]="inputValueOrderNumberFilter" (keyup)="applyOrderNumberFilter($event.target.value)" placeholder="订单编号">
  </mat-form-field>
  <mat-form-field>
    <input #filterOrderNumber matInput [(ngModel)]="inputValueUserMobileFilter" (keyup)="applyUserMobileFilter($event.target.value)" placeholder="用户联系方式">
  </mat-form-field>
</div>
<table mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <!-- checkbox column -->
  <ng-container matColumnDef="selector">
    <th mat-header-cell *matHeaderCellDef>--</th>
    <td mat-cell *matCellDef="let row" (click)="$event.stopPropagation()" title="订单详情">
      <mat-checkbox [(ngModel)]="row.selected"></mat-checkbox>
    </td>
  </ng-container>
  <!-- navi to detail Column -->
  <ng-container matColumnDef="detail">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>--</th>
    <td mat-cell *matCellDef="let row">
      <button mat-icon-button (click)="selectRow($event.target, row)">
        <mat-icon>info</mat-icon>
      </button>
    </td>
  </ng-container>
  <!-- Id Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>id</th>
    <td mat-cell *matCellDef="let row">{{row.id}}</td>
  </ng-container>
  <!-- Order Column -->
  <ng-container matColumnDef="order">
    <th mat-header-cell *matHeaderCellDef style="width:360px"> 订单信息 </th>
    <td mat-cell *matCellDef="let row">
      编号：{{row.orderNumber}} <br>
      服务：{{row.vehicleType.name}} - {{row.vehicleCategory.name}} - {{row.color}} - {{row.license}} <br>
      地址：{{row.fullAddress}} <br>
      客户：{{row.user.lastName+row.user.firstName | genderrr}} - <strong>{{row.user.phoneNumber}}</strong> <br>
      <!--地址：{{row.address}} <br>-->
      <!--备注：{{row.remarks}} <br>-->
      预约时间：{{row.bookTime}} <br>
      <!--完成时间：{{row.completedTime}} <br>-->
      订单价格：<strong>￥{{row.discountedPrice}}</strong>
    </td>
  </ng-container>

  <!-- Service Column -->
  <ng-container matColumnDef="service">
    <th mat-header-cell *matHeaderCellDef style="width:160px"> 服务信息 </th>
    <td mat-cell *matCellDef="let row">
      名称：{{row.serviceName}} <br>
      车牌：{{row.license}} <br>
      颜色：{{row.color}} <br>
      车型：{{row.vehicleType.name}} <br>
      车种：{{row.vehicleCategory.name}} <br>
      原价：￥{{row.price}}
    </td>
  </ng-container>

  <!-- User Column -->
  <ng-container matColumnDef="user">
    <th mat-header-cell *matHeaderCellDef style="width:220px"> 用户信息 </th>
    <td mat-cell *matCellDef="let row">
      用户姓名：{{row.user.lastName+row.user.firstName | genderrr}} <br>
      用户性别：{{row.user.genderId | genderrr}} <br>
      联系方式：<strong>{{row.user.phoneNumber}}</strong>
    </td>
  </ng-container>
  <!-- Employee Column -->
  <ng-container matColumnDef="employee">
    <th mat-header-cell *matHeaderCellDef style="width:220px"> 用工信息 </th>
    <td mat-cell *matCellDef="let row">
      工人编号：{{row.washerInfo?.id}} <br>
      工人姓名：{{row.washerInfo?.lastName+row.washerInfo?.firstName | genderrr}} <br>
      工人性别：{{row.washerInfo?.gender | genderrr}} <br>
      联系方式：{{row.washerInfo?.phoneNumber}}
    </td>
  </ng-container>

  <!-- Status Column -->
  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef style="width:83px"> 状态 </th>
    <td mat-cell *matCellDef="let row"> <strong>{{row.status}}</strong></td>
  </ng-container>

  <ng-container matColumnDef="oper">
    <th mat-header-cell *matHeaderCellDef>--</th>
    <td mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
      <div fxLayout="row" fxLayoutGap="10px" >
        <button mat-raised-button [disabled]="unassignedDisabled" (click)="onUnassignedClicked($event.target, row)" *ngIf="row.statusCode === 0">待派单</button>
        <button mat-raised-button [disabled]="assignDisabled" (click)="onAssignClicked($event.target, row)" color="primary" *ngIf="row.statusCode === 20">派单</button>
        <button mat-raised-button [disabled]="refundDisabled" (click)="onRefundClicked($event.target, row)" *ngIf="row.statusCode === 0 || row.statusCode >= 20 && row.statusCode < 50">退款</button>
        <button mat-raised-button [disabled]="finishRefundDisabled" (click)="onFinishRefundClicked($event.target, row)" *ngIf="row.statusCode === 50">已退款</button>
        <button mat-raised-button [disabled]="deleteDisabled" (click)="onDeleteClicked($event.target, row)" *ngIf="row.statusCode === 0 || row.statusCode < 0">删除</button>
        <button mat-raised-button [disabled]="problemDisabled" (click)="onProblemClicked($event.target, row)" *ngIf="row.statusCode >= 10 && row.statusCode < 40">转问题</button>
        <button mat-raised-button [disabled]="cancelDisabled" (click)="onCancelClicked($event.target, row)" *ngIf="row.statusCode === 0 || row.statusCode >= 10 && row.statusCode < 40">取消</button>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <!--<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow($event.target, row)"></tr>-->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator #paginator [showFirstLastButtons]="true"
               [length]="orders.length"
               [pageIndex]="0"
               [pageSize]="10"
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
<div id="tool-bar-bottom" fxLayout="row " fxLayoutGap="10px">
  <app-nav-back></app-nav-back><app-nav-dashboard></app-nav-dashboard>
</div>
